<template>
    <el-container class="jxc_buy_collect_report_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate
                    slot="header"
                    ref="header"
                    :table-ref="tableOptions.ref"
                    :toolbar_buttons="headerOption.toolbar_buttons"
                    :toolbar_filter="headerOption.toolbar_filter"
                    :searchForm="searchForm"
                    :isSearchInput="false"
                    @event="handleHeaderEvent">
                    <template slot="toolbar_buttons">
                        <div style="line-height: 34px; display: flex;">
                            <div v-if="checkRadio !== 3" style="margin-right: 2em;">
                                <el-button type="primary" icon="el-icon-bottom" @click="handleExport">导出</el-button>
                            </div>
                            <div>
                                <el-radio-group v-model="checkRadio" @change="initPage">
                                    <el-radio :label="1">采购汇总</el-radio>
                                    <el-radio :label="2">采购退货汇总</el-radio>
                                    <el-radio :label="3">可视化图表</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </template>
                    <template slot="right_search">
                        <el-form-item label="年份" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-date-picker v-model="searchForm.yyyy" type="year" placeholder="选择年份"
                                            value-format="yyyy" format="yyyy 年" style="width: 130px;" />
                        </el-form-item>
                    </template>
                </headerTemplate>
                <div class="card_content">
                    <div v-if="checkRadio === 3">
                        <el-row>
                            <div class="charts_area">
                                <Echarts ref="dashboard_charts" id="dashboard_buy_amount_charts"
                                         :options="chartOption" width="100%" height="100%"/>
                            </div>
                        </el-row>
                        <el-row>
                            <div class="charts_area">
                                <Echarts ref="dashboard_charts2" id="dashboard_buy_qty_charts"
                                         :options="chartOption2" width="100%" height="100%"/>
                            </div>
                        </el-row>
                    </div>
                    <div v-else>
                        <vxeTableTemplate ref="xTable" :data="dataList" :options="tableOptions" />
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import Echarts from "@common/components/common/Echarts";
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "JxcBuyCollectReport",
    components: {Echarts},
    data() {
        let _this = this;
        return {
            headerOption: {
                toolbar_buttons: [],
                toolbar_filter: [],
            },
            checkRadio: 1,
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: "JxcBuyCollectReportTable",
                container: ".jxc_buy_collect_report_container",
                multiSelect: false,
                showSummary: true,
                summaryArray: ["total_amount", "amount_1", "amount_2", "amount_3",
                    "amount_4", "amount_5", "amount_6", "amount_7", "amount_8",
                    "amount_9", "amount_10", "amount_11", "amount_12"],
                columns:[
                    {
                        label: '年份',
                        prop: 'yyyy',
                        align: 'center',
                        minWidth: 120,
                    },
                    {
                        label: '总金额',
                        prop: 'total_amount',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '1月',
                        prop: 'amount_1',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '2月',
                        prop: 'amount_2',
                        align: 'center',
                        width: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '3月',
                        prop: 'amount_3',
                        align: 'center',
                        minWidth: 120,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '4月',
                        prop: 'amount_4',
                        align: 'center',
                        minWidth: 120,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '5月',
                        prop: 'amount_5',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '6月',
                        prop: 'amount_6',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '7月',
                        prop: 'amount_7',
                        align: 'center',
                        minWidth: 110,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '8月',
                        prop: 'amount_8',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '9月',
                        prop: 'amount_9',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '10月',
                        prop: 'amount_10',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '11月',
                        prop: 'amount_11',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '12月',
                        prop: 'amount_12',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                operates: false,
                pagination: false,
            },
            chartOption: {
                title: {
                    text: '采购额'
                },
                legend: {
                    data: ['采购金额', '采购退货金额']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'none', // 设置点击时是否有背景阴影,默认为直线，可选为：'line' | 'shadow' | 'none' | 'cross'
                    },
                    hideDelay: 1000,
                },
                series: []
            },
            chartOption2: {
                title: {
                    text: '采购量'
                },
                legend: {
                    data: ['采购数量', '采购退货数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'none', // 设置点击时是否有背景阴影,默认为直线，可选为：'line' | 'shadow' | 'none' | 'cross'
                    },
                    hideDelay: 1000,
                },
                series: []
            },
        };
    },
    mounted() {
        let _this = this;
        _this.initPage();
    },
    methods: {
        // 初始化
        initPage() {
            let _this = this;
            if (_this.checkRadio === 1) {
                _this.getList();
            } else if (_this.checkRadio === 2){
                _this.getReturnList();
            } else if (_this.checkRadio === 3){
                if (!_this.searchForm.yyyy) {
                    _this.searchForm = $.extend({}, _this.searchForm, {
                        yyyy: _this.$utils.formatDate(new Date(), 'yyyy')
                    });
                }
                _this.getChartList();
            }
        },
        // 刷新、查询
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.initPage();
            } else if (event.type === "refresh") {
                _this.initPage();
            }
        },
        // 获取列表信息
        getList() {
            let _this = this;
            _this.fetchData(_this.$api.API_FindBuyOrderCollectReportList, _this.searchForm).then(result => {
                _this.dataList = result.data || [];
            }).catch(() => {
            });
        },
        // 获取列表信息
        getReturnList() {
            let _this = this;
            _this.fetchData(_this.$api.API_FindBuyReturnCollectReportList, _this.searchForm).then(result => {
                _this.dataList = result.data || [];
            }).catch(() => {
            });
        },
        getChartList() {
            let _this = this;
            _this.fetchData(_this.$api.API_FindBuyAmountQtyVisualChartList, _this.searchForm).then(result => {
                let data = result.data || [];
                let buyMMData = [];
                let buyAmountData = [];
                let buyReturnAmountData = [];
                let buyQtyData = [];
                let buyReturnQtyData = [];
                if (data.length > 0) {
                    let size = data[data.length - 1].mm;
                    for (let i = 1; i <= size; i++) {
                        let item = data.filter(item => item.mm === i);
                        buyMMData.push(i + '月份');
                        if (item && item.length > 0) {
                            buyAmountData.push(item[0].buy_amount.toFixed(2));
                            buyReturnAmountData.push(item[0].buy_return_amount.toFixed(2));
                            buyQtyData.push(item[0].buy_qty);
                            buyReturnQtyData.push(item[0].buy_return_qty);
                        } else {
                            buyAmountData.push(Number(0).toFixed(2));
                            buyReturnAmountData.push(Number(0).toFixed(2));
                            buyQtyData.push(0);
                            buyReturnQtyData.push(0);
                        }
                    }
                }
                _this.getBuyAmountChart(buyMMData, buyAmountData, buyReturnAmountData);
                _this.getBuyQtyChart(buyMMData, buyQtyData, buyReturnQtyData);
            }).catch(() => {

            });
        },
        // 销售额可视化报表
        getBuyAmountChart(buyMMData, buyAmountData, buyReturnAmountData) {
            let _this = this;
            let buyAmountObj = {
                name: '采购金额',
                // type: 'bar',
                type: 'line',
                // stack: 'Total',
                data: buyAmountData,
                itemStyle: {
                    normal: {
                        color: '#409EFF',//rgb(24, 144, 255)
                    }
                },
            };
            let buyReturnAmountObj = {
                name: '采购退货金额',
                // type: 'bar',
                type: 'line',
                // stack: 'Total',
                data: buyReturnAmountData,
                itemStyle: {
                    normal: {
                        color: '#F56C6C',//rgb(24, 144, 255)
                    }
                },
            };
            _this.chartOption.xAxis.data = buyMMData;
            _this.chartOption.series = [buyAmountObj, buyReturnAmountObj];
        },
        // 销售量可视化报表
        getBuyQtyChart(buyMMData, buyQtyData, buyReturnQtyData) {
            let _this = this;
            let buyQtyDataObj = {
                name: '采购数量',
                // type: 'bar',
                type: 'line',
                // stack: 'Total',
                data: buyQtyData,
                itemStyle: {
                    normal: {
                        color: '#409EFF',//rgb(24, 144, 255)
                    }
                },
            };
            let buyReturnQtyDataObj = {
                name: '采购退货数量',
                // type: 'bar',
                type: 'line',
                // stack: 'Total',
                data: buyReturnQtyData,
                itemStyle: {
                    normal: {
                        color: '#F56C6C',//rgb(24, 144, 255)
                    }
                },
            };
            _this.chartOption2.xAxis.data = buyMMData;
            _this.chartOption2.series = [buyQtyDataObj, buyReturnQtyDataObj];
        },
        // 导出Excel
        handleExport() {
            const _this = this;
            if (_this.checkRadio === 3) {
                return;
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            let templateName = _this.$api.EXPORT_TEMPLATE_NAME_BUY_COLLECT;
            let outputName =  _this.checkRadio === 1 ? '采购汇总' : '采购退货汇总';
            let url = _this.checkRadio === 1 ? _this.$api.API_FindBuyOrderCollectReportList : _this.$api.API_FindBuyReturnCollectReportList;
            poiApi.exportExcelTemplate(templateName, url, queryData, outputName, {}, undefined, 1, 100, false, true);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_buy_collect_report_container {
    /deep/ .charts_area {
        height: 340px;
    }
    /deep/ .el-date-editor .el-range-separator {
        padding: 0 5px;
        line-height: 21px;
        width: 10%;
        color: #303133;
    }
}
</style>
